import React, {PureComponent} from 'react';
import moment from 'moment';
import {connect} from 'dva';
import {routerRedux, Link} from 'dva/router';
import {Icon, Menu, Switch, Row, Col, DatePicker, Dropdown, Form, Card, Select, List, Button} from 'antd';
import UserCouponGroupTable from "../../components/UserCouponGroupTable";

import PageHeaderLayout from "../../layouts/PageHeaderLayout";
import styles from './CouponGroup.less';
import UserCouponGroupModal from "../../components/UserCouponGroupModal/index";

const FormItem = Form.Item;
const {RangePicker} = DatePicker;
@Form.create()
@connect(state => ({
    coupon_group: state.coupon_group,
}))
export default class CouponGroup extends PureComponent {

    state = {
        selectedRows: []
    }

    componentDidMount() {
        const {dispatch, match} = this.props;

        dispatch({
            type: 'coupon_group/fetch',
        });
    }


    loadData(){
        const {dispatch, match} = this.props;

        dispatch({
            type: 'coupon_group/fetch',
        });
    }


    handleStandardTableChange = (pagination, filtersArg, sorter) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;

        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = {...obj};
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});

        const params = {
            page: pagination.current,
            size: pagination.pageSize,
            ...formValues,
            ...filters,
        };
        if (sorter.field) {
            console.log(sorter.order);
            // params.sorter = `${sorter.field}_${sorter.order}`;
            params.order = sorter.order;
            params.sorter = sorter.field;
        }

        dispatch({
            type: 'coupon_group/fetch',
            payload: params,
        });
    }

    handleSearch = (e) => {
        e.preventDefault();

        const {dispatch, form} = this.props;

        form.validateFields((err, fieldsValue) => {
            if (err) return;

            const values = {};
            if (fieldsValue.keyword) {
                values.type = this.state.type;
                values.keyword = fieldsValue.keyword;
            }
            if (fieldsValue.end_at) {
                values.end_at = fieldsValue.end_at.map(item => item.format('YYYY-MM-DD HH:mm:ss'));
            }
            this.setState({
                formValues: values,
            });

            dispatch({
                type: 'coupon_group/fetch',
                payload: values,
            });
        });
    }

    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;

        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={10} sm={24}>
                        <FormItem label="到期时间">
                            {getFieldDecorator('end_at')(
                                <RangePicker/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                <span className={styles.submitButtons}>
                  <Button type="primary" htmlType="submit">查询</Button>
                  <Button style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</Button>
                </span>
                    </Col>
                </Row>
            </Form>
        );
    }
    removeCoupons = (id)=>{
        this.props.dispatch({
            type:"coupon_group/remove",
            payload:{id:id},
            callback:()=>{
                this.loadData()
            }
        })
    }

    renderForm() {
        return this.renderSimpleForm();
    }

    handleModalVisible = (flag) => {
        this.props.dispatch({
            type: 'coupon_group/changeVisible',
            payload: true,
            callback: () => {
                console.log('回调');
            },
        });
    }

    render() {
        const {coupon_group: {loading, data, confirmLoading, modalVisible}} = this.props;
        const {selectedRows} = this.state;
        const menu = (
            <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
                <Menu.Item key="remove">删除</Menu.Item>
            </Menu>
        );
        return (
            <PageHeaderLayout title="优惠券管理">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderForm()}
                        </div>
                        <div className={styles.tableListOperator}>
                            <Button icon="plus" type="primary"
                                    onClick={() => this.handleModalVisible(true)}>添加优惠券组</Button>
                            {
                                selectedRows.length > 0 && (
                                    <span>
                                  <Button onClick={() => this.handleStatus(2)}>作废
                                  </Button>
                                  <Dropdown overlay={menu}>
                                    <Button>
                        更多操作 <Icon type="down"/>
                                    </Button>
                                  </Dropdown>
                                </span>
                                )
                            }
                        </div>
                        <UserCouponGroupTable
                            loading={loading}
                            data={data}
                            handleDelete={(id)=>this.removeCoupons(id)}
                            onChange={this.handleStandardTableChange}
                        />
                    </div>
                </Card>
                <UserCouponGroupModal onHandleAddSuccess={()=>{this.loadData()}}/>
            </PageHeaderLayout>
        );
    }
}